<!--
 * @Author: Lizhen
 * @Date: 2023-08-11
 * @LastEditors: Lizhen
 * @LastEditTime: 2023-08-17
 * @FilePath: /vite-project/src/views/rulesView.vue
 * @Description: 
-->
<script setup>
import { ref } from 'vue'
import { useTimesStore } from '@/stores/times'
const { timesArr, setTimesArr, handleAdd,  handleDelete } = useTimesStore()
const handleConfirm = (index, row) => {
  row.canEdit = false
}
const handleEdit = (index, row) => {
  row.canEdit = true
}
</script>
<template>
  <div style="display: flex; justify-content: space-between;">
    <el-tag type="danger" size="normal"  effect="dark"  >暂时只支持4个卡的情况</el-tag>
    <el-button type="primary" size="default" @click="handleAdd">添加规则</el-button>
  </div>
  
  <el-divider />
  <div class="rules">
    <el-table :data="timesArr" style="width: 100%">
    <el-table-column prop="no" label="创建时间" width="180" />
    <el-table-column prop="role" label="适用角色"  >
      <template #default="scope">
        <el-input v-if="scope.row.canEdit" v-model="scope.row.role" clearable ></el-input>
        <el-tag  v-else type="success"  effect="dark"  >{{ scope.row.role }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="上午上班" >
      <template #default="scope">
        <el-time-picker v-if="scope.row.canEdit" v-model="scope.row.workUp" 
        :default-value="new Date('00-01-02 08:30:40')"
        format="HH:mm:00"
        value-format="HH:mm"  > </el-time-picker>
        <el-text v-else>{{ scope.row.workUp }}</el-text>
      </template>
    </el-table-column>
    <el-table-column prop="noonDown" label="上午下班" >
      <template #default="scope">
        <el-time-picker v-if="scope.row.canEdit" v-model="scope.row.noonDown" 
        :default-value="new Date('00-01-02 12:00:40')"
        format="HH:mm:00"
        value-format="HH:mm"  > </el-time-picker>
        <el-text v-else>{{ scope.row.noonDown }}</el-text>
      </template>
    </el-table-column>
    <el-table-column prop="noonUp" label="下午上班" >
      <template #default="scope">
        <el-time-picker v-if="scope.row.canEdit" v-model="scope.row.noonUp" 
        :default-value="new Date('00-01-02 14:00:40')"
        format="HH:mm:00"
        value-format="HH:mm"  > </el-time-picker>
        <el-text v-else>{{ scope.row.noonUp }}</el-text>
      </template>
    </el-table-column>
    <el-table-column prop="workDown" label="下午下班" >
      <template #default="scope">
        <el-time-picker v-if="scope.row.canEdit" v-model="scope.row.workDown" 
        :default-value="new Date('00-01-02 18:30:40')"
        format="HH:mm:00"
        value-format="HH:mm"  > </el-time-picker>
        <el-text v-else>{{ scope.row.workDown }}</el-text>
      </template>
    </el-table-column>
    <el-table-column label="操作" >
      <template #default="scope">
        <el-button v-if="scope.row.canEdit" type="success" size="mini" @click="handleConfirm(scope.$index, scope.row)">确定</el-button>
        <el-button v-else type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>

  </el-table>
  </div>
</template>

<style>

</style>
